<template>
  <div>
     <h1>购物车</h1>
     <input type="text" v-model="myinptext">
     <h1>{{state.name}}</h1>
     <h1>{{mycar}}</h1>
     <button @click="toChange">改变</button>
      <div id="box">
        <div id="inner">
          <!--Teleport vue3 瞬移组件 将dom结构 随意的改变到任意位置 
           显示内容不变 方便统一管理 提高性能-->
          <Teleport to="#app">
              <el-dialog title="被瞬移的弹出层" width="50%" v-model="diaFlag">
              
              </el-dialog>
          </Teleport>
       </div>
       
  <!-- Suspense -->
<!-- 核心作用是：在等待异步内容（异步组件、带异步数据的组件）加载完成时，先显示 “加载中” 的 fallback 内容，加载完成后再切换到目标内容。 -->
       <Suspense>
             <supCom></supCom>
            <template #fallback>
              <div>
                正在加载中....
              </div>
           </template>
        </Suspense>
      </div>
      <hr>
      <cartOne></cartOne>
  </div>
</template>
<script setup  lang="ts">
  import {ref,unref,toValue,reactive,isProxy,shallowRef,
    onRenderTracked,onRenderTriggered,
    onActivated,onDeactivated,defineAsyncComponent
  } from 'vue'
  import supCom from './sup.vue'
// defineAsyncComponent 把组件以异步的方式导入进来它在运行时是懒加载的 提高性能
  let cartOne= defineAsyncComponent(() =>
    import('./cartOne.vue')
  );

  // unref 可以或ref内部的值 
  let  a=ref(1)
  let b=2;
  let c=unref(a)
  // toValue 与unref类似，但是toValue可以处理函数
    toValue(1) //       --> 1
    toValue(ref(1)) //  --> 1
    toValue(() => 1) // --> 1
  // isProxy() 检测数据是否由reactive创建的 readonly创建
    let d=reactive({
    name:1
    })
    console.log(isProxy(d))
  // isReadonly() 检测数据是否由readonly方法创建的
  // isReactive() 检测数据是否由reactive方法创建的
    // shallowRef() 浅层响应式的ref
    // shallowReactive() 浅层响应式的reactive
    // shallowReadonly() 浅层响应式的readonly
  let state=shallowRef({
        name:"dsfg",
        city:{
          name:"廊坊",
          arae:{
            aname:"广阳区"
          }
        }
  })
  let myinptext=ref("")
    let mycar=ref("奔驰")
  let toChange=()=>{
    state.value.name="北京"
    mycar.value="宝马"
  }
  // onRenderTracked() 监听渲染
  // 当组件渲染过程中追踪到响应式依赖时调用

  onRenderTracked(()=>{
     console.log(111)
  })
  // onRenderTriggered() 监听渲染
  // 当响应式依赖的变更触发了组件渲染时调用。
  onRenderTriggered(()=>{
    console.log(222)
  })
  let diaFlag=ref(false)

  // keep-alive 组件的激活与失活
  onActivated(()=>{
    console.log("激活")
  })
  onDeactivated(()=>{
    console.log("失活")
  })

//  onWatcherCleanup 注册一个清理函数 ，当被侦听的副作用被停止时调用该清理函数。
// watchSyncEffect  每当响应式依赖发生变化时，立即同步执行。
// watchPostEffect 在组件渲染函数执行之后、并且 DOM 已经被更新之后。
</script>